<template>
    <div class="test">
        <div style="height: 4rem; border: 1px solid red;">
            <RouterLink to="/list">
                返回列表(要保留之前的搜索条件)
            </RouterLink>
            <span>Canvas 入门</span>
            <span>标签</span>
        </div>
        <NLayout has-sider>
            <NLayoutSider collapse-mode="transform"
                          :collapsed-width="120"
                          :width="240"
                          show-trigger="arrow-circle"
                          bordered>
                <NAnchor>
                    <NAnchorLink title="演示" href="#demo">
                        <NAnchorLink title="基础用法" href="#basic" />
                        <NAnchorLink title="忽略间隔" href="#ignore" />
                        <NAnchorLink title="固定" href="#affix" />
                        <NAnchorLink title="滚动到" href="#scrollto" />
                    </NAnchorLink>
                    <NAnchorLink title="API" href="#API" />
                </NAnchor>
            </NLayoutSider>
            <NLayoutContent>
                <NScrollbar style="max-height: calc(100vh - 5.5rem - 2px)" trigger="none">
                    <div id="demo">
                        <div>
                            演示6
                        </div>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                    </div>
                    <div id="basic">
                        <h1>
                            基础用法
                        </h1>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                    </div>
                    <div id="ignore">
                        <h1>
                            忽略间隔
                        </h1>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                    </div>
                    <div id="affix">
                        <h1>
                            固定
                        </h1>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                    </div>
                    <div id="scrollto">
                        <h1>
                            滚动到
                        </h1>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                    </div>
                    <div id="API">
                        <h1>
                            Canvas
                        </h1>
                        <!-- width和height后面不要加PX, 并且不要通过CSS设置宽高 -->
                        <!-- canvas元素实际上有两套尺寸: 一个是元素本身的大小, 还有一个是元素绘图表面（drawing surface）的大小. -->
                        <!-- CSS只能设置元素的大小 -->
                        <canvas ref="canvas" width="600" height="300" class="b-solid">
                            Canvas not supported
                        </canvas>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                    </div>
                </NScrollbar>
            </NLayoutContent>
        </NLayout>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// vue中可以直接使用ref获得DOM元素, 相当于：document.getElementById('canvas')
const canvas = ref();

// 组件挂载后才能获得DOM元素(canvas.value才有值)
onMounted(() => {
    // 绘图环境
    const context = canvas.value.getContext('2d');
    // 字体,等同于css中的font属性
    context.font = '36px Arial,"Microsoft YaHei",sans-serif';
    // 填充样式, 可传color字符串或CanvasGradient对象(渐变色)或CanvasPattern对象(图案)
    context.fillStyle = '#00f';
    // 描边样式, 参数和fillStyle一致
    context.strokeStyle = '#0ff';
    // 填充文本, 参数：(text, x, y, [maxWidth]), 当文本宽度大于最大宽度时, 会自动缩小文本至最大宽度
    context.fillText('你好, Canvas', canvas.value.width / 2 - 108, canvas.value.height / 2 + 18);
    // 描边文本, 参数和fillText一致
    context.strokeText('你好, Canvas', canvas.value.width / 2 - 108, canvas.value.height / 2 + 18);
});
</script>

<style scoped lang="scss">

</style>
